<template>
	<div class="relevance">
		<div class="header">
			<div class="iconfont" @click.stop="goBack" v-show="false">&#xe624;</div>
			<div class="bg-img">
				<img :src="info.blog_head_img" height="100%" width="100%" />
			</div>
			<div class="drop"></div>
			<div class="header-con">
				<div class="avatar" @click="goNextPage">
					<img :src="info.head_pic" height="100%" width="100%" />
				</div>
				<div class="name">
					<h3 class="title">{{info.zhName}} 
						<span class="btn" v-for="item in info.tag">{{item}}</span>
					</h3>
					<p class="desc"><span style="color: red;">认证</span> : {{info.auth_info}}</p>
					<p class="desc">{{info.signature}}!</p>
				</div>
				<div class="fans">
					<p class="number">{{info.fans_count}}</p>
					<p class="title">粉丝</p>
				</div>
			</div>
		</div>
		<div class="content">
			<h3 class="title">推荐宝店客：{{info.zhName}}({{info.userId}})</h3>
			<div class="txt-con">
				此宝店客将为你的宝店进行社会化推广传播，平台会根据你宝店在阿宝平台经营业绩给予此宝店客现金奖励。
				<span class="friends">已有宝友：{{info.maker_friends_num}}人</span>
			</div>
			<h3 class="title title1">关联此宝店后，宝店将获得</h3>
			<!--<div class="link-con">
				在50个高流量推广平台免费推广宝店
				<span class="link-btn">查看详情></span>
			</div>
			<div class="link-con">
				使用开奖宝店券时，多享5%的返现
				<span class="link-btn">查看详情></span>
			</div>-->
			<div class="item-info">
					<div class="image-one">
						<img src="../../assets/images/coinShop/1(1).png" width="100%" />
					</div>
					<div class="info">
						<h3 class="name">最大化传播推广你的宝店</h3>
						<p class="desc">宝店客使用自己的社会关系及渠道推广宝店</p>
					</div>
				</div>
				<div class="item-info">
					<div class="image-one">
						<img src="../../assets/images/coinShop/2(1).png" width="100%" />
					</div>
					<div class="info">
						<h3 class="name">让你的宝店有更多会员消费</h3>
						<p class="desc">宝店客的宝友全部自动成为你的宝店会员/消费</p>
					</div>
				</div>
				<div class="item-info" v-for="item in privilege" v-show="privilege.length">
					<div class="image-one">
						<img :src="item.icon_path" width="100%" />
					</div>
					<div class="info">
						<h3 class="name">{{item.subTitle}}</h3>
						<p class="desc">{{item.description}}</p>
						<p class="desc">{{item.timeNotice}}</p>
					</div>
				</div>
				<div class="pad"></div>
		</div>
		<div class="btn-warrp">
			<div class="confirm-btn" @click="goNext">确认关联</div>
		</div>
		
	</div>
</template>

<script>
	import { setCookie, getCookie, removeCookie, clearCookie } from '@/assets/js/cookie'
	import {getUrlParam}  from '@/assets/js/getUrlParam'
	export default{
		name : 'relevance',
		data(){
			return{
				info : {},
				shopid : '',
				hasStore : true,
				isWeChat : true,
				privilege : []
			}
		},
		mounted(){
			this.shopid = this.$route.query.shop_id
			if(this.shopid){
				this.getStoreByLink(this.shopid)
			}
			this.getPrivilege()
			document.title = '推荐宝店客'
			this.getPageInfo()
		},
		methods:{
			//查看特权信息
			getPrivilege(){
				this.$axiosGet('/propcard/privileges/butie.json',{
					id : getUrlParam('fuid')
				},true).then( res => {
					if(res.code === 200){
						this.privilege = res.data
					}					
				})
			},
			//跳到下一页
			goNextPage(){
				this.$router.push('/authenticator')
			},
			//是不是微信
			isWeiXin(){
				let agent = navigator.userAgent.toLowerCase();
			    if (agent.match(/MicroMessenger/i) == "micromessenger") {		   	
			       	this.isWeChat = true
			    } else {
			        this.isWeChat = false
			    }
			},
			//url中的参数
			urlParam(){
				let userinfo = {
					uid   : getUrlParam('uid')   || getCookie('uid'),
					token : getUrlParam('token') || getCookie('token')
				}
				return userinfo
			},
			//获取页面需要的信息
			getPageInfo(){
				let info = {
					userinfo : {
						uid   : getUrlParam('uid')   || getCookie('uid'),
						token : getUrlParam('token') || getCookie('token'),
					},
					fuid : getUrlParam('fuid')
				}
				this.$axiosPost('/api/store/getFuser',{
					data : JSON.stringify(info)
				}).then( res => {
					if(res){
						this.info = res
						localStorage.setItem('relevance',JSON.stringify(this.info))
					}
				})
			},
			//返回
			goBack(){
				//直接关闭浏览器
				if(this.shopid){
					this.$closeWin()
				}else{
					//退一步
					this.$router.go(-1)	
				}							
			},
			//确认关联，下一步
			goNext(){
				let cityId = this.$route.query.cityId
				//正常流程走过来
				if(!this.shopid){
					let type = this.$route.query.type 
					//线上的店铺
					if(type === 'online'){
						let id = this.$route.query.id  
						let shop_id = this.$route.query.shop_id
						this.$router.push({path:'/getStore',query:{id:id,shop_id:shop_id}})
					}else{
						//线下的店铺
						this.$router.push({path:'/setting',query:{cityId:cityId}})
					}		
				}
				//APP通过链接直接进来
				else{					
					if(!this.hasStore){
						this.$vux.toast.text('店铺不存在')
						return
					}
					let type = this.$route.query.cat_pid
					//是线下的店铺
					if(type == 14705){
						this.$router.push({path:'/setting',query:{cityId:cityId}})						
					}
					//是线上的店铺
					else{
						this.$router.push({path:'/getStore',query:{id:this.author.demand_id,type:type}})
					}
				}
			
			},
			//通过链接进来的，直接获取要认领的店铺的资料
			getStoreByLink(shopid){				
				let info = {
					userinfo : this.urlParam(),
					shop_id  : shopid
				}
				let url  = ''
				let type = this.$route.query.cat_pid
				console.log(type)
				if(type == 14705){ //是实体店
					url = '/api/store/getStoreInfo'
				}else{//是线上店铺
					url = '/api/onlinestore/getStoreInfo'					
				}
				this.$axiosGet(url,{
					data : JSON.stringify(info)
				}).then( res => {
					if(res && res.code != 404){
						//线上的店铺
						if(type !== 14705){
							this.typeId = res.cat_pid
							//店铺的信息
							this.itemInfo = {
								shop_name : res.title,
								shop_link : res.shop_link,
								face_path : res.face_path
							}
							//制作者的信息
							this.author = {
								typeId    : res.cat_pid,
								demand_id : res.demand_id,
								shop_id   : res.shop_id,
								maker_uid : res.maker_uid,
								maker_description : res.maker_description
							}
							setCookie('mid',this.author.demand_id)
							localStorage.setItem('storeAvatar',JSON.stringify(this.itemInfo))
							localStorage.setItem('author',JSON.stringify(this.author))
							localStorage.setItem('id',JSON.stringify(res.cat_id))
						}
						
					}
					//线下的店铺
					if(res.code == 200){
						if(type == 14705){
							this.storeInfo = res.data
							localStorage.setItem('avatar',JSON.stringify(this.storeInfo))
						}

					}
					//店铺不存在
					if(res.code == 404){
						this.hasStore = false
						this.$vux.toast.text('店铺不存在')
					}
				})
			},
		}
	}
</script>

<style lang="less" scoped>
@comColor:#fe1a57;
	.relevance{
		text-align: left;
		.header{
			overflow: hidden;
			position: relative;
			width: 100%;
			height:5rem;
			.iconfont{
				z-index: 199;
				padding: .1rem;
				position: absolute;
				top: .9rem;
				left: .2rem;
				color: #fff;
			}
			.bg-img{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
			.drop{
				position: absolute;
				top: 0;
				left: 0;
				height: 100%;
				width: 100%;
				background: rgba(0,0,0,.2);
			}
			.header-con{
				position: relative;
				top: 0;
				z-index: 1000;
				height: 100%;
				width: 100%;
				.avatar{
					overflow: hidden;
					margin-top: 1.8rem;
					margin-left: .4rem;
					height: 1.4rem;
					width: 1.4rem;
					border: 2px solid #fff;
					border-radius: 50%;
				}
				.name{
					margin-left: .4rem;
					margin-top: .1rem;
					color: #fff;
					.btn{
						vertical-align: top;
						display: inline-block;
						height: .4rem;
						width: 1rem;
						margin-right: .05rem;
						line-height: .4rem;
						text-align: center;
						background: #d4d3be;
						border-radius: .3rem;
						font-size: .24rem;
						font-weight: 100;
						color: #ba555d;
					}
					.desc:first-of-type{
						margin-top: .1rem;
					}
					.desc{
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						width: 65%;
						height: .4rem;
						line-height: .4rem;
						
					}
				}
				.fans{
					position: absolute;
					top: 1.8rem;
					right: .4rem;
					color: #fff;
					text-align: right;
				}
			}
		}
		.content{
			background: #fff;
			padding-bottom: .4rem;
			.title,.title1{
				padding-left: .4rem;
				padding-top: .4rem;
				text-align: left;
				line-height: 1.4rem;
			}
			.title1{
				padding-top: 0;
			}
			.user-info,.item-info{
				position: relative;
				padding:0 .4rem;
				padding-bottom: .4rem;
				display: flex;
				.image{
					height: .5rem;
					width: .9rem;
				}
				.image-one{
					height: 1.3rem;
					width: 1.3rem;
					font-size: .28rem;
					line-height: .6rem;
				}
				.avatar{
					overflow: hidden;
					width: 1.4rem;
					height: 1.4rem;
					border-radius: 50%;
				}
				.info{
					margin-left: .2rem;
					display: flex;
					flex-direction: column;
					justify-content: center;
					.desc{
						line-height: .38rem;
						font-size: .24rem;
					}
				}
				.contact-btn{
					position: absolute;
					top: .23rem;
					right: .3rem;
					width: 1.5rem;
					height: .6rem;
					text-align: center;
					line-height: .6rem;
					color: @comColor;
					border-radius: .06rem;
				}
			}
			.pad{
				height: .8rem;
			}
			.txt-con{
				position: relative;
				padding:0 .4rem;
				padding-bottom: .4rem;
				.friends{
					position: absolute;
					right: .4rem;
					bottom: 0;
				}
			}
			/*.link-con{
				position: relative;
				margin: 0 auto;
				margin-bottom: .3rem;
				width: 90%;
				padding: .2rem;
				padding-bottom: .5rem;
				background: #f5f5f5;
				border-radius: .2rem;
				.link-btn{
					position: absolute;
					right: .2rem;
					bottom: .1rem;
					color: #ff1253;
				}
			}
			.link-con:last-of-type{
				margin-bottom: 1.3rem;
			}*/
		}
		.btn-warrp{
			z-index: 99;
			position: fixed;
			bottom: 0;
			width: 100%;
			padding: .2rem 0;
			background: #fff;
			.confirm-btn{
				margin:0 auto;
				width: 90%;
				height: .8rem;
				line-height: .8rem;
				text-align: center;
				background: #ff1253;
				color: #fff;
				border-radius: .1rem;
			}
		}

	}
</style>